<template>
  <div class="not-found-page">
    <div class="header">
      <Header />
    </div>
    <div class="not-found">
      <img :src="svg404" alt="" />
      <div class="title">您所访问的页面不存在！</div>
    </div>
  </div>
</template>

<script setup>
import Header from '@/views/layout/components/HeadView.vue';
import svg404 from '@/assets/images/404/404.svg';
</script>

<style lang="scss" scoped>
.not-found-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  .header {
    height: 50px;
    border-bottom: 1px solid var(--border-color1);
  }
  .not-found {
    flex-grow: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 50px;
    > img {
      width: 500px;
    }
    .title {
      font-size: 30px;
      color: var(--el-text-color-regular);
    }
  }
}
</style>
